<template>
    <div id="form">
        <form @submit.prevent="submit">
            <div>
                <label for="mobile">手机号</label>
                <input type="text" name="mobile" v-model="mobile" @blur="checkMobile" placeholder="请输入手机号">
            </div>
            <div>
                <br>
                <label for="code">验证码</label>
                <input type="text" name="code" v-model="code" placeholder="请输入验证码">
                <send-code :mobile="mobile" @checkmobile="hasCode"></send-code>
            </div>
            <br>
            <input type="submit" :disabled="disabled" value="登录">
        </form>
    </div>
</template>

<script>
import sendCode from '@/components/sendCode/sendCode'
const regMobile = /^1[3|5|6|7|8|9]\d{9}$/
const regCode = /^\d{4}$/
export default {
    name: '',
    components: {
        sendCode
    },
    data() { 
        return {
            disabled: true,
            mobile: '',
            code: '',
            isGetCode: false
        }
    },
    created() {

    },
    methods:{
        showLoading(msg) {
            this.$loading.show(msg)
            setTimeout(() => {
                this.$loading.hide()
            }, 1000);
        },

        checkMobile(flag) {
            if(!regMobile.test(this.mobile)) {
               this.showLoading('手机号格式不正确')
            } 
        },

        hasCode(flag) {
            if(!regMobile.test(this.mobile)) {
               this.showLoading('手机号格式不正确')
            } 
            this.isGetCode = flag
        },

        submit() {
            console.log(this.isGetCode)
            if(this.isGetCode) {

                if(!regCode.test(this.code)) {
                    this.showLoading('验证码不正确')
                } else {
                    this.showLoading('登录成功')
                    this.$router.push('/about')
                }
            } else {
                this.showLoading('请先获取验证码')
            }
            
            
        }
    },
    watch: {
        mobile() {
            if(this.mobile && this.code) {
                this.disabled = false
            } else {
                this.disabled = true
            }
        },

        code() {
            if(this.mobile && this.code) {
                this.disabled = false
            } else {
                this.disabled = true
            }
        }
    }
}
</script>

<style scoped>
input{
    width: 150px;
}
form {
    padding-left: 30px;
}
form div{
    margin-top: 15px;
}
input[type=submit] {
    display: block;
    width: 80px;
    margin: 0 auto;
    background-color: green;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 15px;
}
input[disabled] {
    background-color: #ccc;
    color: #333;
}
</style>